<script setup>
let props = defineProps({
  ip: String,
  ipNumber: Number,
  vulNumber: Number,
  portNumber: Number,
  useTime: String,
  date: String,
});
</script>

<template>
  <div class="scan-info-root">
    <div class="scan-info-header">
      <img src="../assets/images/globl.png" style="max-height: 100%" />
      <div style="font-size: 20px">{{ props.ip }}</div>
    </div>
    <div class="scan-info-panel">
      <div class="scan-info-text">
        <div
          style="
            grid-row: 2 / 4;
            grid-column: 5 / 7;
            font-size: 30px;
            color: #32417c;
          "
        >
          {{ props.ipNumber }}
        </div>
        <div
          style="
            grid-row: 2 / 4;
            grid-column: 2 / 5;
            font-size: 20px;
            color: #32417c;
          "
        >
          活跃IP
        </div>
      </div>
      <div style="background-color: #d9d9d9; height: 100%; width: 100%"></div>
      <div class="scan-info-text">
        <div
          style="
            grid-row: 2 / 4;
            grid-column: 5 / 7;
            font-size: 30px;
            color: #32417c;
          "
        >
          {{ props.vulNumber }}
        </div>
        <div
          style="
            grid-row: 2 / 4;
            grid-column: 2 / 5;
            font-size: 20px;
            color: #32417c;
          "
        >
          漏洞数
        </div>
      </div>
      <div style="background-color: #d9d9d9; height: 100%; width: 100%"></div>
      <div class="scan-info-text">
        <div
          style="
            grid-row: 2 / 4;
            grid-column: 5 / 7;
            font-size: 30px;
            color: #32417c;
          "
        >
          {{ props.portNumber }}
        </div>
        <div
          style="
            grid-row: 2 / 4;
            grid-column: 2 / 6;
            font-size: 20px;
            color: #32417c;
          "
        >
          活跃端口
        </div>
      </div>
      <div style="background-color: #d9d9d9; height: 100%; width: 100%"></div>
      <div class="scan-info-date">
        <div
          style="
            grid-row: 2 / 3;
            grid-column: 2 / 3;
            font-size: 15px;
            color: #32417c;
          "
        >
          <div style="display: grid; grid-template-columns: 30% 1fr auto">
            <div>用时</div>
            <div></div>
            <div>{{ props.useTime }}</div>
          </div>
        </div>
        <div
          style="
            grid-row: 3 / 4;
            grid-column: 2 / 3;
            font-size: 15px;
            color: #32417c;
          "
        >
          <div style="display: grid; grid-template-columns: 30% 1fr auto">
            <div>日期</div>
            <div></div>
            <div>{{ props.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scan-info-root {
  display: grid;
  padding: 2%;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  background-color: #ffffff;
  border-radius: 15px;
}

.scan-info-root:hover {
  cursor: pointer;
  display: grid;
  padding: 2%;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  background-color: #f7f3f3;
  border-radius: 15px;
}

.scan-info-header {
  display: flex;
  align-items: center;
}

.scan-info-panel {
  display: grid;
  grid-template-columns: 1fr 0.5% 1fr 0.5% 1fr 0.5% 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  grid-row: 2 / 5;
}

.scan-info-text {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.scan-info-date {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: 10% 80% 10%;
}
</style>